<template>
	<div class="system-menu-container">
		<el-dialog title="新增菜单" v-model="isShowDialog" >
			<el-form ref="addMenuFormRef" :model="formData" :rules="formRules" size="small" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="上级菜单">
							<el-cascader
								placeholder="请选择上级菜单（可选填）"
								v-model="formData.parentIds"
								:options="menus"
								:props="{expandTrigger: 'hover', checkStrictly: true, value: 'id', label: 'menuName', children: 'children' }"
								class="w100"
								clearable>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单类型" prop="menuType">
							<el-radio v-model="formData.menuType" label="catalog" clearable>目 录</el-radio>
							<el-radio v-model="formData.menuType" label="menu" clearable>菜 单</el-radio>
							<el-radio v-model="formData.menuType" label="button" clearable>按 钮</el-radio>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单名称" prop="menuName">
							<el-input v-model="formData.menuName" placeholder="请输入菜单名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="路由名称">
							<el-input 
								v-model="formData.name" 
								placeholder="请输入路由名称（路由中的name值）" 
								:disabled="formData.menuType === 'button'"
								clearable>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="权限标识" prop="perms">
							<el-input v-model="formData.perms" placeholder="请输入权限标识" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单排序" prop="orderNum">
							<el-input-number v-model="formData.orderNum" :min="0" :max="999" clearable class="w100"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单图标">
							<IconSelector 
								placeholder="请选择菜单图标" 
								v-model="formData.icon" 
								type="awe"
								:disabled="formData.menuType === 'button'"
								clearable>
							</IconSelector>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="组件地址">
							<el-input 
								v-model="formData.component" 
								placeholder="组件地址" 
								:disabled="formData.menuType === 'catalog' || formData.menuType === 'button'"
								clearable>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="公共资源">
							<el-select :disabled="formData.menuType === 'button'" v-model="formData.isCommon" placeholder="请选择是否公共资源" clearable class="w100">
								<el-option label="是" value="Y"></el-option>
								<el-option label="否" value="N"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否隐藏">
							<el-select :disabled="formData.menuType === 'button'" v-model="formData.isHide" placeholder="请选择是否隐藏" clearable class="w100">
								<el-option label="是" value="Y"></el-option>
								<el-option label="否" value="N"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否缓存">
							<el-select :disabled="formData.menuType === 'button'" v-model="formData.isKeepAlive" placeholder="请选择是否缓存" clearable class="w100">
								<el-option label="是" value="Y"></el-option>
								<el-option label="否" value="N"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否固定">
							<el-select :disabled="formData.menuType === 'button'" v-model="formData.isAffix" placeholder="请选择是否固定" clearable class="w100">
								<el-option label="是" value="Y"></el-option>
								<el-option label="否" value="N"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否外链">
							<el-select :disabled="formData.menuType === 'button'" v-model="formData.isLink" placeholder="请选择是否外链" clearable class="w100">
								<el-option label="是" value="Y"></el-option>
								<el-option label="否" value="N"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否内嵌">
							<el-select :disabled="formData.menuType === 'button'" v-model="formData.isIframe" placeholder="请选择是否iframe" clearable class="w100">
								<el-option label="是" value="Y"></el-option>
								<el-option label="否" value="N"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col class="mb20">
						<el-form-item label="链接地址" prop="linkUrl">
							<el-input
								v-model="formData.linkUrl"
								placeholder="外链/内嵌时链接地址（http://xxx.com）"
								clearable
								:disabled="formData.isLink === 'N' || formData.menuType === 'button'"
							>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col class="mb20">
						<el-form-item label="备注">
							<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import IconSelector from '/@/components/iconSelector/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getMenuList, addMenu } from '/@/api/system/menu/index';
import { verifyUrl } from '/@/utils/toolsValidate';
import { lineToTreeData } from '/@/utils/commonFunction';
export default {
	name: 'menu/add',
	components: { IconSelector },
	setup(props, context) {
		const addMenuFormRef = ref();
		//校验链接地址
		const validLinkUrl = (rule, value, callback) => {
			if(value && !verifyUrl(value)){
				return callback(new Error('请输入正确格式的地址'));
			}
			callback();
		}
		
		const state = reactive({
			isShowDialog: false,
			menus: [],
			formData: {
				parentId : 'root',
				isCommon: 'N',
				isHide: 'N',
				isHide: 'N',
				isKeepAlive: 'N',
				isAffix: 'N',
				isLink: 'N',
				isIframe: 'N',
				orderNum : 1
			},
			formRules : {
				menuType: { required: true, message: '菜单类型不能为空', trigger: 'change' },
				menuName: { required: true, message: '菜单名称不能为空', trigger: 'blur' },
				perms: { required: true, message: '权限标识不能为空', trigger: 'blur' },
				orderNum: { required: true, message: '菜单排序不能为空', trigger: 'blur' },
				linkUrl: { validator: validLinkUrl, trigger: 'blur' },
			}
		});

		//初始化上级菜单级联
		const loadMenus = async () => {
			await getMenuList().then((res) => {
				if(res.code == 0){
					state.menus = lineToTreeData(res.data);
				}
			});
		}
		// 打开弹窗
		const openDialog = (row?: object) => {
			state.isShowDialog = true;
			//处理上级菜单级联选择
			if(row){
				let ancestors = row.ancestors.split(',');
				state.formData.parentIds = [];
				for(var i = 0; i < ancestors.length; i++){
					var id = ancestors[i];
					if(id && id != 'root'){
						state.formData.parentIds.push(id);
					}
				}
				state.formData.parentIds.push(row.id);
			}
			loadMenus();
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
			for(var key in state.formData) {
				state.formData[key] = undefined;
			}
			state.formData.parentId = 'root';
			state.formData.isCommon = 'N';
			state.formData.isHide = 'N';
			state.formData.isKeepAlive = 'N';
			state.formData.isAffix = 'N';
			state.formData.isLink = 'N';
			state.formData.isIframe = 'N';
			state.formData.orderNum = 1;
			addMenuFormRef.value.resetFields();
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
			addMenuFormRef.value.validate(valid => {
				if(valid){
					const ids = state.formData.parentIds;
					let parentId = ids ? (ids.length > 0 ? ids[ids.length - 1] : state.formData.parentId) : 'root';
					let params = {
						parentId: parentId,
						menuType: state.formData.menuType,
						menuName: state.formData.menuName,
						name: state.formData.name,
						icon: state.formData.icon,
						component: state.formData.component,
						isCommon: state.formData.isCommon,
						isHide: state.formData.isHide,
						isKeepAlive: state.formData.isKeepAlive,
						isAffix: state.formData.isAffix,
						isLink: state.formData.isLink,
						isIframe: state.formData.isIframe,
						linkUrl: state.formData.linkUrl,
						perms: state.formData.perms,
						orderNum: state.formData.orderNum,
						remark: state.formData.remark
					}
					addMenu(params).then((res) => {
						if(res.code === 0){
							ElMessage.success('保存成功');
							context.emit('submit');
							closeDialog();
						}
					});
				}
			});
		};
		return {
			addMenuFormRef,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>